<template>
  <div>
    <div class="header">
      <van-nav-bar title="使用记录" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div  id="container_history">

    </div>
    <div class="photo_history">
      根据近日检测结果：<br>
        <span style="padding-left:80px">您的血糖正常</span>
    </div>
  </div>
</template>
<script>
import { Line } from '@antv/g2plot';
export default {
  data() {
    return {
      listData: [
        {
          "Date": "2-15",
          "scales": 3.6
        },
        {
          "Date": "2-16",
          "scales": 4.1
        },
        {
          "Date": "2-17",
          "scales": 5.2
        },
        {
          "Date": "2-18",
          "scales": 5.8
        },
        {
          "Date": "2-19",
          "scales": 6.8
        },
        {
          "Date": "2-20",
          "scales": 7.8
        },
        {
          "Date": "2-21",
          "scales": 6.5
        },
        {
          "Date": "2-22",
          "scales": 8.1
        },
      ]
    }
  },
  mounted(){
    this.renderChats()
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    renderChats() {
      const line = new Line('container_history', {
        data:this.listData,
        padding: 'auto',
        xField: 'Date',
        yField: 'scales',
        xAxis: {
          // type: 'timeCat',
        },
        yAxis:{
          tickCount: 10,

        }
      });
      line.render();
    }
  }
}
</script>
<style lang="less" >
.van-nav-bar__content {
  background-color: #53a8ef;

  .van-nav-bar__title,
  .van-icon-arrow-left,
  .van-nav-bar__text {
    color: white;
  }
}

#container_history {
  height: 250px;
  width: 90%;
  margin: 10px auto;
}
.photo_history{
  padding: 40px;
  box-sizing: border-box;
  width: 90%;
  height: 150px;
  background-color: #53a8ef;
  opacity: 0.5;
  margin: 50px auto;
  color: white;
  font-family: "楷体";
  font-weight: bold;
  font-size: 20px;
  border-radius: 5px;
}
</style>




















































































































